<template>
  <a-drawer
    title="告警列表"
    style="height: 100%"
    :width="500"
    :mask="false"
    placement="left"
    :wrap-style="{ position: 'absolute' }"
    :visible="visible"
    getContainer=".alarmBox"
    @close="close"
  >
    <div class="btnBox">
      <a-row :gutter="16">
        <a-form-model @keyup.enter.native="onSearch">
          <a-col :span="12">
            <a-form-model-item label="手机号码">
              <a-input v-model="formData.phone" placeholder="请输入" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="告警类型">
              <j-dict-select-tag
                style="width:100%;"
                v-model="formData.alarmType"
                placeholder="请选择"
                :dictCode="alarmTypeDatas"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="处置状态" style="margin-bottom: 0">
              <a-select placeholder="请选择" v-model="formData.status">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="1">已处置</a-select-option>
                <a-select-option value="0">未处置</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" style="position: relative;top: 40px;">
            <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
              <a-space>
                <a-button type="primary" @click="onSearch"> 查询 </a-button>
                <a-button @click="onResetForm"> 重置 </a-button>
                <!-- <a-button type="primary" :disabled="isDisabled" @click="handleDispose">处置</a-button> -->
              </a-space>
            </a-form-model-item>
          </a-col>
        </a-form-model>
      </a-row>
    </div>
    <div class="alarm-table">
      <custom-table
        ref="table"
        :showAlert="false"
        :columns="columns"
        :dataSource="pageData"
        :showSelection="false"
        :showPagination="true"
        :customRow="clickCustomRow"
        :rowClassName="rowClassName"
        @selectedRowKeys="onSelectedRowKeys"
        rowKey="uuid"
        @change="onTableChange"
      >
        <template slot="status" slot-scope="text">
          <!-- 0、全部，1,待批，2进行，3驳回，4,关闭 -->
          <span v-if="text == 0">未处置</span>
          <span v-if="text == 1">已处置</span>
        </template>
        <template slot="phone" slot-scope="text, record">
          <span>{{ text }}</span>
          <a-tag v-if="record.isSamplePerson" style="margin-top:10px;" color="red">负样本人员</a-tag>
        </template>
      </custom-table>
    </div>
  </a-drawer>
</template>

<script>
import * as alarmApi from '@/api/wxSmuggle/alarm.js'
import { getXzqhList, getDictItemsFromCache } from '@/api/api'
import { drctAlarmType } from '@/utils/tenantFilter'
import CustomTable from '@/components/zxd/Table/CustomTable'
import { querySimpleByPhoneList } from '@/utils/util'
export default {
  props: ['visible'],
  components: {
    CustomTable
  },
  data() {
    return {
      formData: {},
      uuid: null,
      alarmTypeDatas: null,
      alarmLevelOptions: [
        { text: '红色告警', value: '3' },
        { text: '橙色告警', value: '2' },
        { text: '黄色告警', value: '1' }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
        operationModule: 2 // 1.告警中心，2.告警一张图（审计日志用）
      },
      pageData: {},
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 50,
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '手机号码',
          dataIndex: 'phone',
          width: 110,
          scopedSlots: { customRender: 'phone' }
        },
        {
          title: '告警类型',
          dataIndex: 'alarmType',
          width: 80,
          customRender: (text, record) => {
            return this.filterMultiDictText(this.alarmTypeDatas, text)
          }
        },
        {
          title: '告警时间',
          dataIndex: 'alarmTime',
          width: 80,
          scopedSlots: { customRender: 'alarmTime' }
        },
        {
          title: '告警程度',
          dataIndex: 'alarmLevel',
          width: 80,
          customRender: (text, record) => {
            return (
              <span class={text == 1 ? 'text_color_1' : text == 2 ? 'text_color_2' : 'text_color_3'}>
                {this.getItemsFrom(this.alarmLevelOptions, text)}
              </span>
            )
          }
        },
        {
          title: '处置状态',
          dataIndex: 'status',
          width: 80,
          scopedSlots: { customRender: 'status' }
        }
      ],
      labelCol: { span: 5 },
      wrapperCol: { span: 14 },
      isDisabled: true,
      selectKeys: []
    }
  },
  created() {
    this.alarmTypeDatas = drctAlarmType
  },
  mounted() {
    this.onQuery()
  },
  methods: {
    onSelectedRowKeys(keys) {
      console.log(keys)
      this.selectKeys = keys
      this.isDisabled = keys.length > 0 ? false : true
    },
    onSearch() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.formData = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.refreshTable()
    },
    refreshTable() {
      let formData = Object.assign({}, this.formData, this.pageFilter)
      this.loading = true
      alarmApi
        .getPageList(formData)
        .then(res => {
          if (res.success) {
            this.pageData = res.result
            this.loading = false
            //判断是否是负样本号码，并添加负样本标签(电话号码字段：phoneNumber传1，phone传2，msisdn传3)
            querySimpleByPhoneList(this, 2, this.pageData.records)
            // this.$refs.table.onClearRowKeys()
          } else {
            this.loading = false
            this.$message.warn(res.message)
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    rangePickerChange(date) {
      this.$set(this.formData, 'warnBeginAt', date[0])
      this.$set(this.formData, 'warnEndAt', date[1])
    },
    clickCustomRow(record, index) {
      var _this = this
      return {
        on: {
          // 事件
          click: () => {
            this.uuid = record.uuid
            this.$emit('clickRow', record)
          }
        }
      }
    },
    rowClassName(record, index) {
      let className = ''
      if (record.uuid == this.uuid) {
        className = 'row-active'
      }
      return className
    },
    addCaseClose() {
      this.$refs.table.onClearRowKeys()
    },
    close(value) {
      this.$emit('close', value)
    },
    handleDispose() {
      this.$emit('handleDispose', this.selectKeys)
    },
    filterMultiDictText(dictCode, text) {
      if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    },
    getItemsFrom(datas, key) {
      let item = datas.filter(t => t['value'] == key)
      if (item && item.length > 0) {
        return item[0]['text']
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-drawer-header {
  background-color: #f2f2f2 !important;
}
/deep/.ant-drawer-body {
  padding: 0;
}
.btnBox {
  padding: 20px 20px 20px 10px;
  /deep/ .ant-row {
    margin-bottom: 0;
  }
  // overflow: hidden;
  // button {
  //   float: left;
  //   margin-left: 20px;
  // }
  // .searchInput {
  //   width: 300px;
  //   float: left;
  // }
}
.alarm-table {
  /deep/.ant-table-row {
    cursor: pointer;
  }
  /deep/.ant-table-thead > tr > th,
  /deep/.ant-table-tbody > tr > td {
    padding-left: 5px;
    padding-right: 5px;
  }
  /deep/.ant-table-thead > tr:first-child > th:first-child,
  /deep/.ant-table-tbody > tr > td:first-child {
    padding-left: 10px;
  }
  .text_color_1 {
    color: #bfbf00;
    padding-right: 6px;
  }
  .text_color_2 {
    color: #f59a23;
    padding-right: 6px;
  }
  .text_color_3 {
    color: #d9001b;
    padding-right: 6px;
  }
  /deep/tr.ant-table-row.row-active {
    background-color: #e1f8ff;
  }
}
</style>
